<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root"></div>
    <!-- 
        crossorigin: 跨域 
        虽然说script标签本身的src地址就是可以跨域访问资源的，
        但是如果跨域了，如果报了错误，错误信息是很简陋的，没有错误的详细信息
        通过crossorigin属性，错误信息会更加详细
    -->
    <!-- 开发版本的reactjs react核心库，与宿主环境无关-->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 依赖核心库，将核心的功能与页面结合 -->
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 转义JSX -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
        // ReactDom.render(要显示的东西, 容器)
        // ReactDOM.render('Hello Word', document.getElementById('root'))

        // 创建一个h1
        // const span = React.createElement('span', {}, 'span')
        // const h1 = React.createElement('h1', { title: "react元素" }, 'Hello Word', '子节点', span)
        // ReactDOM.render(h1, document.getElementById('root'))

        // 使用JSX
        // JS 的扩展语法，需要使用 babel 进行转义
        const html = <h1 title="React元素">Hello World <span>一个span元素</span></h1>
        ReactDOM.render(html, document.getElementById('root'))
    </script>
</body>

</html>